<template>
  <view class="warp">
    <image src="../../../static/my/invita.jpg" mode="widthFix" class="backgImg"></image>
     <!-- <top-tabbar :tabTitle="tabTitle" :backColor="backColor" :titleStatus="titleStatus" @click="clickBack"></top-tabbar> -->
    <view class="main">
      <!-- 立即邀请 -->
      <view class="invitation">
        <view class="item-title">仅需四部轻松获得现金奖励</view>
        <view class="iconfont-name-box">
          <view class="item-icon-title" v-for="item in iconList" :key="item.value">
            <view class="iconfont-name">
              <view class="iconfont">{{ item.label }}</view>
              <view class="text">{{ item.title }}</view>
            </view>
            <view class="iconfont arrow">{{ item.arrow }}</view>
          </view>
        </view>
        <luo-button text="立即邀请" type="primary" :size=32 @btnClick="Jump('/pages/my/invitation/friends_share')"></luo-button>
      </view>
      <!--我的收益与排行榜  -->
      <view class="profit-ranking">
       	<scroll-view class="scroll1" scroll-x="true">
       			<view :class="currentTab==index ? 'select' : ''" :style="{borderRradius: currentTab==0 ? '40rpx 0 0 0' : '0 40rpx 0 0'}" class="tab-scroll" :data-current="index" @click="swichNav" v-for="(item,index) in scollList"
       						 :key='index'>{{item.title}}
       			</view>
       	</scroll-view>
        <swiper :current="currentTab" @change="bindChange" class='swp'  style="height: 90vh">
          <!-- 我的收益 -->
        	<swiper-item>
            <view class="profit-main">
              <view class="Income-details">
                <view class="profit-awwro" @click="clcikHarcest">收益明细 >></view>
                <view class="my-profit">
                  <view class="num-text">
                    <view><text class="numbers">0</text><text>人</text></view>
                    <view class="invitees-num">邀请人数</view>
                  </view>
                  <view class="profut-Line"></view>
                  <view class="num-text">
                    <view><text class="numbers">0</text><text>元</text></view>
                    <view class="invitees-num">已到账</view>
                  </view>
                  <view class="profut-Line"></view>
                  <view class="num-text">
                    <view><text class="numbers">0</text><text>元</text></view>
                    <view class="invitees-num" style="display:flex;align-items:center;">
                     <view>即将到账</view>
                     <view class="iconfont" @click="onceInto" style="color:#FCE0B2;margin-left:8rpx">&#xe689;</view> 
                    </view>
                  </view>
                </view> 
                <luo-button text="去提现" type="primary" :size=32 @btnClick="aplyClick"></luo-button>
              </view>
              <view class="profut-title">多重大奖 等你来拿</view>
              <view class="red-envelopes">
                <view class="text-envelope">
                  <view class="item-centen-envel">
                    <view class="text-content">
                      <view>邀请好友购买体验课</view>
                      <view>推荐人每单现金奖励随机1-20元现金奖励</view>
                      <view style="margin-top:20rpx">好友可得价值550元系统课优惠券</view>
                    </view>
                    <view class="img-box"><image src="/static/my/envel_p1.jpg"></image></view>
                  </view>
                  <view class="item-centen-envel envelp2">
                    <view class="text-content">
                      <view>好友再购买系统课</view>
                      <view>每单最高可得<text style="color: #F59A23">375</text>元现金奖励</view>
                      <view style="margin-top:20rpx">系统课用户邀请首单好友购买系统课自己再得单订金额<text style="color: #F59A23">15%</text>奖励</view>
                    </view>
                    <view class="img-box"><image src="/static/my/envel_p2.jpg"></image></view>
                  </view>
                </view>
              </view>
              <!-- 奖励二 -->
              <view class="reward">
                <view class="reward-img"><image src="/static/my/reward.jpg"></image></view>
              </view>
            </view>
          </swiper-item>
        	<swiper-item>
            <view class="ranking-main">
              <view class="Award">
                <view class="Grade" v-for="item in giftList" :key="item.id">
                  <view class="second-award">{{ item.award }}</view>
                  <view class="gift">{{ item.name }}</view>
                  <view class="grade-img"><image :src="item.imgUrl"></image></view>
                </view>
                <image src="/static/my/Ranking.jpg"></image>
              </view>
              <view class="ranking-list">
                <view class="item-form" v-for="(item,index) in rankingList" :key="item.id">
                  <view>{{ index+7 }}</view>
                  <view class="img-name">
                    <view class="header-img"><image class="img" :src="item.url"></image></view>
                    <view class="nackname">{{ item.name }}</view>
                  </view>
                  <view style="color: red;">{{item.num}}人</view>
                </view>
              </view>
            </view>
          </swiper-item>		
        </swiper>
        <view class="footer-btn">
           <luo-button text="立即邀请" type="primary" :size=32 @btnClick="Jump('/pages/my/invitation/friends_share')"></luo-button>
        </view>
      </view>
    </view>
    <!-- 活动规则 -->
    <view class="activity-size" @click="clickSize">活动规则</view>
    <logding ref="sizePopup"></logding>
  </view>
</template>

<script>
  import topTabbar from '@/components/topTabbar/index.vue'
  import { pathToBase64, base64ToPath } from '@/components/pathBase64/index.js'
  import luoButton from '@/components/botton/luo-botton.vue'
  import logding from './loding.vue'
  export default {
    components: { topTabbar, luoButton, logding },
  	data() {
  		return {
        titleStatus: false,
        backColor: '',
        tabTitle: '',
        aheight:'',
        currentTab: 0,
        rankingList: [
          { id: 1, name: '逆天而行', num: 5, url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Faa%2F47%2F66%2Faa4766d59659f1341dcfaa79c6648193.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638170985&t=a4d9bc9ed1220623195436acd41545ee'},
          { id: 2, name: '穷凶极恶', num: 8, url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2016%2F12%2F08%2F17542521717.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638170985&t=2fd1212b35fb5e48cc8377c7406d2022'},
          { id: 3, name: '随风起舞', num: 11, url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F7e%2Fe3%2F63%2F7ee36374e1e2e7eb1ed7638ac3833f65.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638170985&t=efb9c6193c665a8b3f47537e8542c8f8'},
          { id: 4, name: '星星有泪', num: 20, url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F23%2F20200723090549_wdhgx.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638170985&t=0a2ebc277392b556cf9891ab866caf9e'},
        ],
        giftList: [
          { award: '二等奖', name: '扫地机器人', id: 1, imgUrl: 'https://img14.360buyimg.com/n2/jfs/t1/192053/5/2529/64143/609a5128Ec5c06f93/ae857dca06085bd0.jpg'},
          { award: '一等奖', name: 'Electra自行车', id: 2, imgUrl: 'https://img10.360buyimg.com/n2/jfs/t1/142564/36/6489/94507/5f432126Eea4b2bfe/7dd4d0b8643fb6ca.jpg'},
          { award: '三等奖', name: 'TI图集', id: 3, imgUrl: 'https://img10.360buyimg.com/n7/jfs/t1/153487/1/4246/151283/5f9e2110Ea8fc3137/26aa31904c6e9fce.jpg'}
        ],
        scollList:[ { title: '我的收益', value: 1 }, { title: '大奖排行榜', value: 2 } ],
        iconList: [
          { label: '\ue740', value: 1, title: "登录账号", arrow: '\ueb09'},
          { label: '\ue778', value: 2, title: "分享邀请", arrow: '\ueb09'},
          { label: '\ue76f', value: 3, title: "购买体验", arrow: '\ueb09'},
          { label: '\ue676', value: 4, title: "现金奖励"},
        ],
  		}
  	},
    onPageScroll(e){
      const vm = this
      if(e.scrollTop > 10) {
        vm.backColor = "#ffffff"
        vm.tabTitle = "大爆炸思维推荐官"
        vm.titleStatus = true
      }
      if(e.scrollTop < 10) {
        vm.backColor = ""
        vm.tabTitle = ""
        vm.titleStatus = false
      }
   	},
    onLoad() {
       this.$wechat.unseBehavior()
    },
  	methods:{
      // 收益明细
      clcikHarcest() {
        uni.navigateTo({
          url: '/pages/my/harvest/index'
        })
      },
      // 即将到账提示弹窗
      onceInto() {
        this.$refs.sizePopup.systemNews()
      },
      //  活动规则弹窗
      clickSize() {
        this.$refs.sizePopup.getPopup()
      },
      // 滑动页面同步tab栏
      bindChange(e) {
        this.currentTab = e.detail.current
      },
      // 跳页面
      Jump(path) {
        uni.navigateTo({
          url: path
        })
      },
      //点击tab切换
      swichNav(e) {
        const that = this
        if (this.currentTab === e.target.dataset.current) {
          return false;
        } else {
          this.currentTab = e.target.dataset.current
        }
      },
      clickBack() {
        uni.navigateBack({})
      }
  	}
  }
</script>

<style lang="scss" scoped>
  .warp{
    image{
      width: 100%;
      height: 100%;
    }
    background: #FE9730;
    /deep/ .top-tabbar-wrap{
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      // box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.3);
    }
   .backgImg{
     width: 100%;
   }
   .main{
     height: 130vh;
     // padding: 0 40rpx 40rpx 40rpx;
     .invitation{
       width: 670rpx;
       // height: 500rpx;
       border-radius: 40rpx;
       background: #ffffff;
       padding-bottom: 40rpx;
       margin: auto;
       .item-title{
         width: 470rpx;
         height: 90rpx;
         line-height: 90rpx;
         text-align: center;
         background: #F59A23;
         margin: auto;
         border-radius: 0 0 70rpx 70rpx;
         color: #FFFFFF;
       }
       .iconfont-name-box{
         margin: 40rpx 0;
         display: flex;
         align-items: center;
         justify-content: center;
         .item-icon-title{
           display: flex;
           // align-items: center;
           .iconfont-name{
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             .iconfont{
               font-size: 60rpx;
               color: #F59A23;
             }
             .text{
               margin-top: 10rpx;
               font-size: 20rpx;
             }
           }
           .arrow{
             font-size: 60rpx;
             color: #C1C1C1;
           }
         }
       }
       /deep/ .btn-primary{
          width: 480rpx;
          height: 88rpx;
          line-height: 88rpx;
          margin: auto;
          letter-spacing: 4rpx;
          border-radius: 44rpx;
       }
     }
     // 我的收益与排行样式
     .profit-ranking{
       // width: 670rpx;
       height: 100vh;
       border-radius: 40rpx;
       // background: #ffffff;
       // margin: 40rpx 0;
       margin: auto;
       margin-top: 40rpx;
       .scroll1 {
       			width: 670rpx;
            height: 80rpx;
            background: #ffffff;
            border-radius: 40rpx 40rpx 0 0;
            margin: auto;
            .tab-scroll {
              width: 50%;
              text-align: center;
              line-height: 80rpx;
              white-space: normal;
              display: inline-block;
            }
            .select:nth-of-type(1) {
                 border-radius: 40rpx 0 0 0;
              }
            .select {
              color: #FFFFFF;
              background: #FF800C;
              border-radius: 0 40rpx 0 0;
            }
        }
        // swiper-item样式
        .swp{
          .profit-main{
            height: 120vh;
            .Income-details{
              width: 670rpx;
              background: #FFFFFF;
              margin: auto;
              padding-bottom: 40rpx;
              border-radius: 0 0 40rpx 40rpx;
              // box-shadow:0rpx -7rpx 14rpx 4rpx rgba(0,0,0,0.3);
              .profit-awwro{
                width: 140rpx;
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
                font-size: 20rpx;
                background: #FFE5CC;
                border-radius: 20rpx 0 0 20rpx;
                margin-left: auto;
                margin-bottom: 20rpx;
              }
              .my-profit{
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 26rpx;
                margin: 0rpx 0 16rpx 0;
                .num-text{
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  .numbers{
                    font-size: 36rpx;
                    font-weight: bold;
                    color: red;
                    margin-right: 10rpx;
                  }
                  .invitees-num{
                    color: #999999;
                    margin-top: 8rpx;
                  }
                }
                .profut-Line{
                  width: 4rpx;
                  height: 60rpx;
                  background: #EAEAEA;
                  margin: 0 40rpx;
                }
              }
              /deep/ .btn-primary{
                 width: 480rpx;
                 // height: 88rpx;
                 // line-height: 88rpx;
                 margin: auto;
                 // letter-spacing: 4rpx;
                 border-radius: 44rpx;
              }
            }
            .profut-title{
              font-size: 48rpx;
              font-weight: bold;
              color: #FFFFFF;
              text-align: center;
              margin: 20rpx 0;
            }
            // 奖励一
            .red-envelopes{
              width: 670rpx;
              margin: auto;
              border-radius: 40rpx;
              // box-shadow:0rpx 0rpx 14rpx 4rpx rgba(0,0,0,0.3);
              background: #ffffff;
              .text-envelope{
                padding: 40rpx;
                .item-centen-envel{
                  display: flex;
                  align-items: center;
                  padding-bottom: 40rpx;
                  border-bottom: 2rpx solid #eeeeee;
                    .text-content{
                       width: 80%;
                       font-size: 24rpx;
                     }
                     .img-box{
                       width: 100rpx;
                       height: 120rpx;
                       margin-left: 20rpx;
                     }
                }
                .envelp2{
                  border-bottom: none;
                  margin-top: 40rpx;
                  padding-bottom: 0;
                }
              }
            }
            // 奖励二
            .reward{
              width: 670rpx;
              // height: 500rpx;
              padding: 20rpx 0;
              background: #FFFFFF;
              border-radius: 40rpx;
              margin: auto;
              margin-top: 40rpx;
              .reward-img{
                width: 550rpx;
                height: 460rpx;
                margin: auto;
              }
            }
          }
          // 排行榜
          .ranking-main{
            width: 670rpx;
            height: 80vh;
            background: #FFFFFF;
            margin: auto;
            border-radius: 0 0 40rpx 40rpx;
            padding-top: 300rpx;
            .Award{
              width: 670rpx;
              height: 368rpx;
              position: relative;
              .Grade:nth-of-type(1) {
                  position: absolute;
                  top: -118rpx;
                  left: 30rpx;
                  z-index: 9;
                }
                .Grade:nth-of-type(2) {
                    position: absolute;
                    top: -124px;
                    left: 138px;
                    z-index: 9;
                  }
                  .Grade:nth-of-type(3) {
                      position: absolute;
                      top: -56rpx;
                      right: 16px;
                      z-index: 9;
                    }
              .Grade{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .second-award{
                  color: red;
                  font-size: 28rpx;
                }
                .gift{
                  color: #AF7657;
                  font-size: 24rpx;
                }
                .grade-img{
                  width: 160rpx;
                  height: 160rpx;
                }
              }
            }
            .ranking-list{
              padding: 40rpx;
              .item-form{
                width: 100%;
                height: 120rpx;
                padding: 0 10rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 2rpx solid #EEEEEE;
                .img-name{
                  display: flex;
                  align-items: center;
                  .header-img{
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                    .img{
                      border-radius: 50%;
                    }
                  }
                  .nackname{
                    width: 200rpx;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    margin-left: 20rpx;
                  }
                }
              }
            }
          }
        }
         .footer-btn{
            width: 100%;
            height: 120rpx;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(40rpx);
            position: fixed;
            bottom: env(safe-area-inset-bottom);
            left: 0;
            // bottom: 0;
            z-index: 99;
            display: flex;
            align-items: center;
            justify-content: center;
            /deep/ .btn-primary{
               width: 670rpx;
               height: 88rpx;
               line-height: 88rpx;
               letter-spacing: 4rpx;
               border-radius: 44rpx;
            }
          }
     }
   }
   // 活动规则
   .activity-size{
     width: 60rpx;
     padding: 20rpx 5rpx 20rpx 25rpx;
     // height: 200rpx;
     border-radius: 40rpx 0 0 40rpx;
     background: rgba(0,0,0,0.2);
     position: fixed;
     top: 25%;
     right: 0;
     font-size: 26rpx;
     color: #D9D9D9;
   }
   
  }
</style>
